<template>
  <div class="searchInfo" ref="content">
    <p class="text">
      搜索<span>"{{ $route.params.keywords }}"</span>,找到{{ songCount }}{{li[current]}}
    </p>
    <ul class="ul">
      <li
        @click="change(index)"
        :class="{ choose: index === current }"
        v-for="(item, index) in li"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
    <div v-if="current == 0">
      <Item :his="songs" />
      <ul v-if="songCount > limit" class="fenye">
        <li v-if="offset == 1" class="dis bor">&lt;</li>
        <li v-else class="bor" @click="next(-1)">&lt;</li>
        <li @click="fenye(1)" :class="{ now: offset == 1 }">1</li>
        <li v-if="preClipped" class="fmore">...</li>
        <li
          :class="{ now: offset == item }"
          v-for="(item, index) in pages"
          @click="fenye(item)"
          :key="index"
        >
          {{ item }}
        </li>
        <li v-if="backClipped" class="fmore">...</li>
        <li v-if="ye > 8" :class="{ now: offset == ye }" @click="fenye(ye - 1)">
          {{ ye }}
        </li>
        <li v-if="offset !== ye" @click="next(1)" class="bor">&gt;</li>
        <li v-else class="dis bor">&gt;</li>
      </ul>
    </div>

    <div v-if="current == 1">
      <Song :keywords="keywords" @change="chagecount"/>
    </div>
    <div v-if="current == 2">
      <List :keywords="keywords" @change="chagecount"/>
    </div>
  </div>
</template>
<script>
import Item from "../playlist/listItem";
import Song from "./searchInfo_song";
import List from "./searchInfo_list";
export default {
  data() {
    return {
      current: 0,
      li: ["单曲", "歌手", "歌单", "视频", "专辑", "歌词", "主播电台", "用户"],
      songs: "",
      songCount: "",
      offset: 1, //当前页数
      preClipped: "",
      backClipped: "",
      pages: [],
      ye: 0,
      scrollTop: 0,
      limit: 60,
      load: "",
      keywords:""
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.load = this.$loading.show();
    let keywords = to.params.keywords;
    this.keywords = to.params.keywords;
    this.init(keywords);
    next();
  },
  mounted() {
    this.load = this.$loading.show();
    this.keywords = this.$route.params.keywords
    this.init(this.$route.params.keywords);
  },
  computed: {
    fen() {
      return this.ye > 8 ? 8 : this.ye;
    },
  },
  methods: {
    change(index) {
      this.current = index;
    },
    pagess() {
      let ret = [];
      if (this.offset >= 9) {
        // 当前页码大于8时，显示当前页码的前3个
        ret.push(this.offset - 3);
        ret.push(this.offset - 2);
        ret.push(this.offset - 1);
        ret.push(this.offset);
        if (this.offset > 5) {
          // 当前页与第一页差距5以上时显示省略号
          this.preClipped = true;
        }
      } else {
        this.preClipped = false;
        for (let i = 2; i <= 8; i++) {
          ret.push(i);
        }
      }
      if (this.offset < this.ye - 2) {
        if (this.offset >= 8) {
          // 显示当前页码的后2个
          ret.push(this.offset + 1);
          ret.push(this.offset + 2);
        }
        if (this.offset <= this.ye - 3) {
          // 当前页与最后一页差距3以上时显示省略号;
          this.backClipped = true;
        }
      } else {
        this.backClipped = false;
        for (let i = this.offset + 1; i < this.ye; i++) {
          ret.push(i);
        }
      }
      return ret;
    },
    next(index) {
      this.load = this.$loading.show();
      this.offset = this.offset + index;
      this.init(this.$route.params.keywords);
      this.$refs.content.scrollTop = 0;
    },
    init(keywords) {
      this.$api
        .search({
          keywords: keywords,
          limit: this.limit,
          offset: (this.offset - 1) * this.limit,
        })
        .then((res) => {
          this.songCount = res.songCount;
          let a = [];
          res.songs.map((item) => {
            let b = {
              id: item.id,
              al: { name: item.name },
              name: item.name,
              ar: [{ name: item.artists[0].name }],
              dt: item.duration,
            };
            a.push(b);
          });
          this.songs = a;
          this.total = res.songCount;
          this.ye = Math.ceil(parseFloat(res.total / this.limit)); //parseInt(res.total / this.limit)
          this.pages = this.pagess();
          this.load.hide();
        });
    },
    fenye(index) {
      if (this.offset == index) return;
      this.load = this.$loading.show();
      this.offset = index;
      this.init(this.$route.params.keywords);
      this.$refs.content.scrollTop = 0;
    },
    chagecount(count){
      this.songCount = count
    }
  },
  components: {
    Item,
    Song,
    List
  },
};
</script>
<style lang="less" scoped>
.searchInfo {
  height: inherit;
  overflow-y: auto;
  .text {
    margin: 30px;
    font-size: 13px;
    span {
      color: #0c73c2;
    }
  }
  .ul {
    list-style-type: none;
    display: flex;
    padding: 10px 0px 0 70px;
    border-bottom: 1px solid #e1e1e2;
    li {
      margin-right: 55px;
      font-size: 15px;
      height: 30px;
    }
    .choose {
      color: #c62f2f;
      border-bottom: 4px solid #c62f2f;
    }
  }
  .fenye {
    list-style-type: none;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    li {
      width: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      font-size: 12px;
      cursor: pointer;
      margin: 0 5px;
      &:hover {
        background-color: #ecedf1;
        border: 1px solid #e1e1e2;
        color: black;
        font-weight: 550;
      }
    }
    .now {
      color: #c62f2f;
      text-decoration: underline;
      padding: 1px;
      &:hover {
        background-color: #fff;
        border: none;
        color: #c62f2f;
        font-weight: normal;
        cursor: default;
      }
    }
    .fmore {
      line-height: 10px;
      span {
        margin-top: -5px;
      }
      &:hover {
        background-color: #fff;
        border: none;
        color: #666;
        cursor: default;
        font-weight: normal;
      }
    }
    .bor {
      border: 1px solid #e1e1e2;
      color: #666;
      font-size: 16px;
      &:hover {
        color: #666;
        font-weight: normal;
      }
    }
    .dis {
      color: #ccc;
      cursor: default;
      font-size: 16px;
      &:hover {
        background-color: #fff;
        color: #ccc;
      }
    }
  }
}
</style>
